<template>
	<view class="order">
		<u-grid :border="false" :col="len" @click="click">
			<u-grid-item :customStyle="customStyle" v-for="(item,index) in data" :key="index">
				<!-- 显示字段优先级---- 图片 > name > icon -->
				<view class="item-img" v-if="item.img">
					<image :src="item.img" mode=""></image>
				</view>  
				<view v-else-if="item.name">
					{{item.name}}
				</view>
				<view v-else class="icon iconfont" :class="item.icon" :style="index==data.length-1?'color: #ffaa00;':''">
				</view>
				<text class="grid-text" :style="'margin-top:'+labelTop+'px;'">{{item.title}}</text>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		props: {
			//展示数据
			data: {
				type: Array,
				default:()=>[]
			},
			//网格item样式
			customStyle:{
				type: Object,
				default: ()=>{{}}
			},
			//文字和图标距离
			labelTop:{
				type: String,
				default: "10"
			},
			//显示个数
			len: {
				type: Number,
				default: 3
			}
		},
		data() {
			return {
				
			}
		}, 
		methods: {
			click(index) {
				this.$emit('clickIndex',index)
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/iconfont.css";
	
	.item-img{
		width: 10vw;
		height: 5vh;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.icon {
		font-size: 50rpx;
	}

	.grid-text {
		font-size: 14px;
	}

	.order {
		margin-top: 16rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}
</style>